<template>
	<view class="fruit-admin-body-container">
		<view class="fruit-admin-kind-item" v-for="(item,index) in data.fruitKindList" :key="index">
			<view class="fruit-admin-kind-item-name" @tap="goItem(index)">{{item.name}}</view> 
			<image src="@/static/eidt.png" mode="widthFix" @tap="editKind(index)"></image>
			<image src="@/page_fruit/static/fruit/delete.png" mode="widthFix" @tap="deleteKind(item.id)"></image>
			<checkbox-group @change="checkboxChange(e,index)">
				<label>
					<checkbox :checked="item.status" />
				</label>
			</checkbox-group>
		</view>
	</view>
	<view class="fruit-admin-btn-container">
		<button class="fruit-admin-btn" @tap="goAdd">添加大类</button>
		<button class="fruit-admin-btn" @tap="goCollate">确定选择，前往排序</button>
	</view>
</template>

<script>
	import {onMounted, reactive} from 'vue'
	import {onShow} from '@dcloudio/uni-app'
	import global from "../../config/global.js"
	export default {
		name:'fruit-admin',
		setup(){
			let data = reactive({
				fruitKindList:[]
			})
			
			onMounted(()=>{
				getData()
			})
			
			onShow(()=>{
				getData()
			})
			
			function getData(){
				uni.request({
					url:`${global.BASE_URL}/fruit/getFruitKind`,
					method:"GET",
					header:{
						"mytoken":uni.getStorageSync("localtoken")
					},
					success: (res) => {
						// console.log(res)
						if(res.data.code){
							data.fruitKindList = res.data.data
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
			
			function editKind(id){
				uni.navigateTo({
					url:"/page_fruit/fruit/fruit-admin-edit-kind?kindInfo="+encodeURIComponent(JSON.stringify(data.fruitKindList[id]))
				})
			}
			
			function goAdd(){
				uni.navigateTo({
					url:"/page_fruit/fruit/fruit-admin-add-kind"
				})
			}
			
			function deleteKind(id){
				uni.showModal({
					title:"确认删除吗",
					success: (res) => {
						if(res.confirm){
							uni.request({
								url:`${global.BASE_URL}/fruit/deleteFruitKind/${id}`,
								method:"DELETE",
								header:{
									"mytoken":uni.getStorageSync("localtoken")
								},
								success: (res) => {
									if(res.data.code){
										getData()
									}
								},
								fail: (err) => {
									console.log(err)
								}
							})
						}
					}
				})
			}
			
			function goCollate(){
				console.log(data.fruitKindList)
				uni.request({
					url:`${global.BASE_URL}/fruit/reviseFruitKind`,
					method:"PUT",
					data:data.fruitKindList,
					header:{
						"mytoken":uni.getStorageSync("localtoken")
					},
					success: (res) => {
						console.log(res)
						if(res.data.code){
							uni.navigateTo({
								url:"/page_fruit/fruit/fruit-admin-collate"
							})
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
			
			function checkboxChange(e,index){
				// console.log(e,index)
				data.fruitKindList[index].status = 1 - data.fruitKindList[index].status       
			}
			
			function goItem(i){
				uni.navigateTo({
					url:"/page_fruit/fruit/fruit-admin-item?kindInfo="+encodeURIComponent(JSON.stringify(data.fruitKindList[i]))
				})
			}
			
			return {
				data,
				goAdd,
				deleteKind,
				goCollate,
				checkboxChange,
				goItem,
				editKind
			}
		}
	}
</script>

<style scoped lang="scss">
	.fruit-admin-body-container{
		width: 680rpx;
		margin: 10rpx 35rpx;
		
		& .fruit-admin-kind-item{
			display: flex;
			width: 700rpx;
			align-items: center;
			height: 50rpx;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #aaaaaa;
			
			& image{
				width: 45rpx;
				margin-left: 15rpx;
			}
			
			& .fruit-admin-kind-item-name{
				width: 500rpx;
				font-size: 32rpx;
			}
			
			& label{
				margin-left: 30rpx;
			}
		}
		
	}
	
	.fruit-admin-btn-container {
		
		& .fruit-admin-btn {
			background-color: #9BCDD2;
			color: white;
			width: 400rpx;
			margin: 30rpx 175rpx 10rpx 175rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 35rpx;
			font-weight: bold;
		}
	}
</style>
